<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		省份：<select name="" id="shenfid" onchange="add()">
			<option value="-1">请选择省份</option>
		</select>
		城市：<select name="" id="chensid" onchange="app()">
			<option value="-1">请选择城市</option>
		</select>
		区县：<select name="" id="quxid" onchange="and()">
			<option value="-1">请选择区县</option>
		</select>
		<br />
		你选择了：<label for="" id="ab1"></label>
	</body>
	<script>
		var shengf=['广西省','广东省','福建省'];
		var chengs=[
			['南宁市','贵港市','桂林市'],
			['广州市','深圳市','东莞市'],
			['厦门市','漳州市','龙岩市']
		]
		var quxian=[
			[['清秀区','江南区'],['港北区','港南区'],['象山区','七星区']],
			[['荔湾区','珠海区'],['宝安区','龙岗区'],['东莞市']],
			[['思明区','同安区'],['龙文区','龙海区'],['上航县','新罗区']]
		];
		
		var sfid=document.getElementById('shenfid');
		var csid=document.getElementById('chensid');
		var qxid=document.getElementById('quxid');
		onload=function(){
			for(var i=0;i<shengf.length;i++){
				document.getElementById('shenfid').innerHTML+=`<option value="`+i+`">`+shengf[i]+`</option>`;
			};
		};
		
		function add(){
			document.getElementById('chensid').innerHTML=`<option value="-1">请选择城市</option>`;
			for(var i=0;i<chengs[sfid.value].length;i++){
				document.getElementById('chensid').innerHTML+=`<option value="`+i+`">`+chengs[sfid.value][i]+`</option>`;
			}
		}
		
		function app(){
			document.getElementById('quxid').innerHTML=`<option value="-1">请选择区县</option>`;
			for(var i=0;i<quxian[id.value][csid.value].length;i++){
				document.getElementById('quxid').innerHTML+=`<option value="`+i+`">`+quxian[sfid.value][csid.value][i]+`</option>`;
			}
		}
		function and(){
			document.getElementById('ab1').innerText=sfid.options[sfid.selectedIndex].text+
			'-'+csid.options[csid.selectedIndex].text+'-'+qxid.options[qxid.selectedIndex].text;
		}
	</script>
</html>